<template>
  <div class="leav">
    <el-card class="leav-left">
      <h5>* 将获取保存你的邮箱和ip地址，仅做记录，不做其他用途</h5>
      <el-row class="comm-row">
        <el-form :model="messForm" :rules="rules" ref="messForm">
          <el-row class="form-head">
            <el-form-item label="名称" prop="mess.userName" label-width="50px">
              <el-input type="text" name="userName" auto-complete="on" v-model="messForm.mess.userName" placeholder="自拟江湖名称"></el-input>
            </el-form-item>
            
            <el-form-item label="邮箱" prop="email" label-width="50px">
              <el-input type="text" name="email" auto-complete="on" v-model="messForm.email" placeholder="Email"></el-input>
            </el-form-item>
          </el-row>
          <el-row class="form-editor">
            <el-form-item label="内容" prop="mess.content" label-width="50px">
              <el-input
                class="el-textarea"
                type="textarea"
                :rows="10"
                placeholder="请输入内容"
                v-model="messForm.mess.content"
                maxlength="255"
                show-word-limit>
              </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-button type="primary" @click="submitForm('messForm')">发表</el-button>
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never" class="leav-right">
      <el-row class="comm-foot">
        <el-row>
          <span>共有 {{dataList.length}} 条留言</span>
        </el-row>
        <el-row>
          <el-card class="comm-main" v-for="(item,index) in dataList" :key="index"  v-infinite-scroll="load">
            <div class="head-name">
              <h4>{{item.userName}}：</h4>
              <p class="head-date">
                <el-row>{{item.leavtime}}</el-row>
              </p>
            </div>
            <div class="comm-content">{{item.content}}</div>
          </el-card>
          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>
        </el-row>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { addMess, getAllMess } from '../api/mess'

export default {
    name: 'Leavmess',
    components: {
    },
    props: {
      query: {
          type: Object,
          default() {
              return {}
          }
      }
    },
    watch: {    // 默认初始化
      'query': {
          handler() {
              this.dataList = []
          },
          deep: true
      }
    },
    data() {        // 定义数据
        return {
            messForm: {
                ip: '',
                email: '',
                mess: {
                    userName: '',
                    content: '',
                }
            },
            dataList: [],
            rules: {
              mess: {
                userName: [
                    {
                      required: true, message: '自拟江湖昵称', trigger: 'blur'
                    },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                content: [
                    {
                        required: true, message: '请输入内容', trigger: 'blur'
                    }
                ]
              },
                email: [
                    {
                        required: true, message: '请输入邮箱', trigger: 'blur'
                    },
                    { type: 'email', message: '请输入有效邮箱地址', trigger: 'blur' }
                ]
            }
        }
    },
    created(){  // 生命周期结束
        this.getMess()
        this.getIp()
    },
    methods: {  // 创建构造函数
        load() {    // 默认执行
            this.getMess()
        },
        getIp(){    // 获取IP地址
            let ip = returnCitySN["cip"]
            let cname = returnCitySN["cname"]
            this.messForm.ip = ip
        },
        getMess(){  // 获取当前文章评论
            getAllMess().then(res => {
                let newMess;
                newMess = res.data
                // this.dataList.length = newCommtent
                this.dataList = newMess
            })
        },
        submitForm:function(formName){  // 发表评论事件
            let that = this
            this.$refs[formName].validate((valid) => {
                if(valid){
                    addMess(that.messForm.mess).then( res => {
                        if(res.code == 200){
                            console.log(res.message)
                            // this.dataList = dataList + that.messForm.mess
                            this.dataList.push(that.messForm.mess)
                        }else{
                            console.log(res.message)
                        }
                        this.resetForm(formName)
                    })
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    }
}
</script>

<style scoped>
.leav {
  margin-top: 3%;
  width: 65%;
  height: 50%;
  display: flex;
}
.leav h5 {
  color: #FF0000;
}
.leav-left {
  width: 40%;
  /* float: left; */
  margin: 0 45px 0 0;
}
.leav-right {
  /* float: left; */
  width: 55%;
  /* height: 70% !important; */
}
.comm-row {
  margin: 20px 0 0 0;
}
/* .form-head {
  display: flex;
} */
.form-head .el-form-item{
  /* margin-right: 50px; */
  width: 90%;
}
.comm-foot {
  margin: 0 0 0 0;
}
.comm-main {
  margin-top: 20px;
  width: 100%;
}
.form-editor {
  margin-bottom: 20px;
}
.form-editor .el-textarea {
  width: 90%;
}
.form-editor .el-textarea__inner {
  padding: 5px 40px 5px 15px !important;
}
.form-editor .el-textarea .el-input__count {
  margin: 0 0 0 10px !important;
}
.el-avatar {
  width: 50px;
  display: block;
}
.head-name {
  display: flex;
}
.head-name h4 {
  width: 200px;
}
.head-name .el-avatar{
  margin-right: 10px;    
}
.main-content {
  font-size: 12px;
  color: rgb(231, 231, 231);
}
.reply-textarea {
  margin: 0 0 0 50px;
}
.reply-textarea .el-button {
  margin: 10px 0 0 0;
}
.head-date {
  width: 100%;
  line-height: 20px;
  font-size: 14px;
  color: #d3d3d3;
  text-align: right;
}
.head-date .reply{
  width: 100%;
  /* line-height: 60px; */
  font-size: 12px;
  color: #d3d3d3;
  display: block;
  cursor: pointer;
}
.head-date .el-row{
  text-align: right;
}
.comm-content {
  /* width: 100%; */
  height: auto;
  margin-left: 40px;
  color: #686363;
}
.vice-main {
  margin-left: 30px;
}
.email-ip {
  display: flex;
  margin: 20px 0 0 0;
}
</style>